<template>
  <div class="qtdashboard">
    <qtHeader fatherTitle="仪表盘"></qtHeader>
    <div class="qtDataBox">
      <div class="qtBoxOne qtBox">
        <div class="qtBoxTop">
          <div class="qtTopLeft">
            <h2>{{assetsTotal}}</h2>
            <span>总资产</span>
          </div>
          <div class="qtTopRight">
            <span>
              <svg class="icon qtIcon" aria-hidden="true">
                <use xlink:href="#icon-zichanmingxi"></use>
              </svg>
            </span>
          </div>
        </div>
        <div class="qtBoxBottom">
          <router-link to="hardware:1">
            <span>更多信息</span>
          </router-link>
        </div>
      </div>
      <div class="qtBoxTwo qtBox">
        <div class="qtBoxTop">
          <div class="qtTopLeft">
            <h2>{{componentsTotal}}</h2>
            <span>总硬件</span>
          </div>
          <div class="qtTopRight">
            <span>
              <svg class="icon qtIcon" aria-hidden="true">
                <use xlink:href="#icon-yingjianzhichi"></use>
              </svg>
            </span>
          </div>
        </div>
        <div class="qtBoxBottom">
          <router-link to="components">
            <span>更多信息</span>
          </router-link>
        </div>
      </div>
      <div class="qtBoxThree qtBox">
        <div class="qtBoxTop">
          <div class="qtTopLeft">
            <h2>{{peripheralTotal}}</h2>
            <span>总外设</span>
          </div>
          <div class="qtTopRight">
            <span>
                <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-component"></use>
                </svg>
            </span>
          </div>
        </div>
        <div class="qtBoxBottom">
          <router-link to="peripheral">
            <span>更多信息</span>
          </router-link>
        </div>
      </div>
      <div class="qtBoxFour qtBox">
        <div class="qtBoxTop">
          <div class="qtTopLeft">
            <h2>{{consumablesTotal}}</h2>
            <span>总耗材</span>
          </div>
          <div class="qtTopRight">
            <span>
                <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-haocai"></use>
                </svg>
            </span>
          </div>
        </div>
        <div class="qtBoxBottom">
          <router-link to="consumables">
            <span>更多信息</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="myChartFather">
      <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
      <div id="myChart2" :style="{width: '800px', height: '600px'}"></div>
    </div>
  </div>
</template>
<script>
import qtHeader from '../components/header'
import { getDashboard } from '@/api/index.js'

export default {
  components: {
    qtHeader
  },
  data () {
    return {
      assetsTotal: '',
      componentsTotal: '',
      peripheralTotal: '',
      consumablesTotal: '',
      data: {},
      dataArr: []
    }
  },
  created () {
    this.getDashboard()
  },
  mounted () {
    this.drawLine2()
  },
  methods: {
    getDashboard () {
      getDashboard().then(res => {
        this.data = res.data.data
        if (res.data.data[0].totals) {
          this.assetsTotal = res.data.data[0].totals
        } else {
          this.assetsTotal = 0
        }
        if (res.data.data[1].totals) {
          this.componentsTotal = res.data.data[1].totals
        } else {
          this.componentsTotal = 0
        }
        if (res.data.data[2].totals) {
          this.peripheralTotal = res.data.data[2].totals
        } else {
          this.peripheralTotal = 0
        }
        if (res.data.data[3].totals) {
          this.consumablesTotal = res.data.data[3].totals
        } else {
          this.consumablesTotal = 0
        }
        for (var key in this.data) {
          this.dataArr.push(this.data[key].totals)
        }
        // console.log(this.data1)
        this.drawLine()
      })
    },
    drawLine () {
    // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))

      // 绘制图表
      myChart.setOption({
        title: { text: '各类型资产数量柱形图', left: 'center' },
        tooltip: {},
        xAxis: {
          data: ['资产', '硬件', '外设', '耗材', '许可证']
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: this.dataArr,
          itemStyle: {
            // 通常情况下：
            normal: {
              color: function (params) {
                var colorList = ['#39cccc', '#d81b60', '#ff851b', '#605ca8', '#ffc007']
                return colorList[params.dataIndex]
              }
            }
          }
        }],
        barWidth: 50 // 粗细度
      })
    },
    drawLine2 () {
    // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart2'))

      // 绘制图表
      myChart.setOption({
        title: { text: '各类型资产数量柱形图', left: 'center' },
        tooltip: {},
        xAxis: {
          data: ['使用中', '未使用', '未使用,可申请', '故障,待维修', '故障,无法维修', '报废']
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: this.dataArr,
          itemStyle: {
            // 通常情况下：
            normal: {
              color: function (params) {
                var colorList = ['#39cccc', '#d81b60', '#ff851b', '#605ca8', '#ffc007']
                return colorList[params.dataIndex]
              }
            }
          }
        }],
        barWidth: 50 // 粗细度
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.qtdashboard {
   padding: 10px;
  .qtDataBox {
    margin-top: 10px;
    display: flex;
    // justify-content: space-between;
    justify-content: space-around;
    .qtBox {
      min-width: 420px;
      height: 130px;
      margin: 0 5px;
      .qtBoxTop {
        // background-color: orange;
        height: 80%;
        display: flex;
        justify-content: space-between;
        .qtTopLeft {
          width: 210px;
          text-align: left;
          padding: 15px 0 0 15px;
          color: #fff;

          h2 {
            font-size: 30px;
            margin-bottom: 10px;
            font-weight: 900;
          }
          span {
            font-size: 14px;
          }
        }
        .qtTopRight {
          width: 210px;
          text-align: right;
          span {
            display: block;
            height: 100%;
            padding-top: 10px;
            padding-right: 5px;
            font-size: 80px;
            color: rgba(0,0,0,.2);
          }
        }
      }
      .qtBoxBottom {
        height: 20%;
        a {
          display: block;
          height: 100%;
          span {
            display: inline-block;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 14px;
          }
        }
      }
    }
    .qtBoxOne {
      background-color: #39cccc;
      .qtBoxBottom {
        background-color: #33b7b7;
      }
    }
    .qtBoxTwo {
      background-color: #d81b60;
      .qtBoxBottom {
        background-color: #c21856;
      }
    }
    .qtBoxThree {
      background-color: #ff851b;
      .qtBoxBottom {
        background-color: #e57718;
      }
    }
    .qtBoxFour {
      background-color: #605ca8;
      .qtBoxBottom {
        background-color: #565397;
      }
    }
  }
  .qtBox:hover .qtTopRight  .qtIcon{
    transform:scale(1.2,1.2);
    transition: transform 1s;
  }
  .qtBox .qtTopRight  .qtIcon{
    transform:scale(1,1);
    transition: transform 1s;
  }
}
.myChartFather {
  // clear: both;
  overflow: hidden;
}
#myChart{
  float: left;
}
#myChart2 {
  float: right;
}
</style>
